<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="仓库名称">
        <el-input v-model="searchMap.name" placeholder=""></el-input>
      </el-form-item>
      
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="success" @click="handleEdit('')">新增</el-button>
      <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" border style="width: 480px" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" fixed prop="id" label="序号" width="100">
      </el-table-column>
      
      
      <el-table-column prop="name" label="仓库名称" width="200">
      </el-table-column>
      
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
          <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
     
  <el-pagination
    @size-change="sizeData"
    @current-change="pageData"
    :page-sizes="[5,10,20,30,60]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="count">
  </el-pagination>


    <!--新增-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="100px">

        <el-row>
          <el-col :span="12" :offset="6">
            <el-form-item label="仓库名称"><el-input v-model="pojo.name" /></el-form-item>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="dialogFormVisible = false">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import storageApi from '@/api/storage'
//导入日期组件
import moment from 'moment'
export default {
  data() {
    return {
      //表格数据
      list: [],
      //查询条件
      searchMap: {
        page: 1,
        limit: 10
      },
      //声明总记录数
      count: 0,
      pojo: {

      },
      id: '',
      dialogFormVisible: false,
      //存储选中的行
      multipleSelection: []


    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //新增和修改(id)
    handleEdit(id) {
      //赋值给全局id
      this.id = id
      //打开弹窗
      this.dialogFormVisible = true

      if (id !== '') {
        //根据id查询数据绑定到模型上面
        storageApi.findById(id).then(response => {
          //回显
          this.pojo = response.data

        })
      } else {
        //清楚之前模型的脏数据
        this.pojo = {

        }
      }
    },
    //序号排序
    handleSortChange({ prop, order }) {
    // 根据prop和order来调整searchMap中的排序参数
    this.searchMap.sortProp = prop;
    this.searchMap.sortOrder = order;
    // 重新加载数据
    this.fetchData();
  },
  //分页大小
    sizeData(size){
        this.searchMap.limit=size
        this.fetchData()
     },
     pageData(page){
       this.searchMap.page=page
       this.fetchData()
     },
    //删除
    handleDelete(id) {
      this.$confirm('您确定要删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        storageApi.delete(id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    
    // 处理选中行变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 批量删除
    handleBatchDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请至少选择一行数据',
        });
        return;
      }
      this.$confirm('您确定要批量删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 获取选中行的id数组
        const ids = this.multipleSelection.map(item => item.id);

        // 调用API进行批量删除
        const batchDelete  = {
          ids: ids
        }
        
        storageApi.batchRemove(batchDelete).then(response => {
          this.$message({
            type: 'success',
            message: '批量删除成功!',
          });
          // 重新加载列表的数据
          this.fetchData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消批量删除',
        });
      });
    },
    //新增和修改保存数据的方法
    handleSave() {
      storageApi.update(this.id, this.pojo).then(response => {
        //新增或者修改成功
        this.$message({
          message: response.msg,
          type: 'success'
        })

        //重新加载列表的数据
        this.fetchData()


        //关闭弹窗
        this.dialogFormVisible = false
      })
    },
    //增加一个格式化日期的方法
    dataFormat(row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD hh:mm:ss')
    },
    //查询数据
    fetchData() {
      storageApi.list(this.searchMap).then(response => {
        this.list = response.data;
        this.count = response.count;
      })
    },

  }
}
</script>